<style>
form {
  /* display: none; */
  width: 700px;
  padding: 40px 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  /* border: 1px solid gray; */
  border-radius: 8px;
  background-color: 255, 255, 255;
  opacity: 1;
}
</style>

<template>
  <app-home>
    <div slot="main">
      <Form :model="formItem" :label-width="80" ref="formItem" :rules="ruleValidate">
        <FormItem label="Title">
          <Input v-model="formItem.title" placeholder="title......"></Input>
        </FormItem>
        <FormItem label="Author">
          <Input v-model="formItem.author"></Input>
        </FormItem>
        <FormItem label="Tips_source" prop="tips_source">
          <Input v-model="formItem.tips_source" placeholder="url like http://www.baidu.com"></Input>
        </FormItem>
        <FormItem label="Describe" prop="describe">
          <Input v-model="formItem.describe" placeholder="describe the news no less than 20 words"></Input>
        </FormItem>
        <FormItem label="News_type" prop="news_type">
          <Input v-model="formItem.news_type"></Input>
        </FormItem>
        <FormItem label="Hot">
          <i-switch v-model="formItem.hot" size="large">
            <span slot="open">true</span>
            <span slot="close">false</span>
          </i-switch>
        </FormItem>
        <FormItem label="keywords">
          <CheckboxGroup v-model="formItem.keywords">
            <Checkbox label="娱乐"></Checkbox>
            <Checkbox label="社会"></Checkbox>
            <Checkbox label="国际"></Checkbox>
            <Checkbox label="体育"></Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="Content">
          <Input
            v-model="formItem.content"
            type="textarea"
            :autosize="{minRows: 2,maxRows: 5}"
            placeholder="Enter something..."
          ></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formItem')">Submit</Button>
          <Button style="margin-left: 8px" @click="handleReset('formItem')">Reset</Button>
        </FormItem>
      </Form>
    </div>
  </app-home>
</template>

<script>
import Home from "@/views/home";
import {validateURL} from "@/utils/validate";
export default {
  components: {
    "app-home": Home
  },
  data() {
    const validateTips_source = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please enter tips_source!"));
      } else if (validateURL(value)) {
        return callback(new Error("url format is error"));
      } else {
        callback();
      }
    };
    return {
      formItem: {
        title: "eeeeeeeeaaaaaaaaaaaee",
        author: "5d0aeb6fed5ec96ce0b45733",
        tips_source: "http://www.baidu.com",
        describe: "222222222222222222222222222222",
        keywords: [],
        news_type: "5d0c5797e7831a4d242d3e38",
        hot: "true",
        content: "eeeeeeeeeeeeeeeeeee"
      },
      ruleValidate: {
        news_type: [
          {
            required: true,
            message: "The news_type cannot be empty",
            trigger: "blur"
          }
        ],
        describe: [
          {
            required: true,
            message: "Please enter a news introduction",
            trigger: "blur"
          },
          {
            type: "string",
            min: 20,
            message: "Introduce no less than 20 words",
            trigger: "blur"
          }
        ],
        tips_source: [
          {
            validator: validateTips_source,
            trigger: "blur"
          }
        ],
        loading: false
      }
    };
  },
  methods: {
    handleSubmit(name) {
    //   console.log(this.formItem);
      this.$refs[name].validate(valid => {
        if (valid) {
            console.log(this.formItem);
          this.$store
            .dispatch("newsCreate",this.formItem)
            .then(() => {
              this.rows = this.$store.state.news.data.rows;
            });
          //   newsCreate(this.formItem.serializeArray());
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>


